
import { getTerrHightByDegree, getTxtImg } from '../../../tools'
export default {
    data() {
        return {
            imgFZCTown: null,
            iconFZCTown: require('@/assets/map/townIcon.png'),
            levelFZC: 5000,
            fzcImg: require('@/assets/map/fangzhicun.png')
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
        // level() {
        //     return this.$store.getters.level
        // }
    },
    watch: {
        basin: {
            handler: function (name) {
                this.$nextTick(() => {
                    this.creatFZC(name)
                })
            },
            immediate: true
        }
    },
    beforeDestroy() {
        this.clearFZC()
        this.$eventBus.$off('FZCHideXZC')
        this.$eventBus.$off('FZCShowXZC')
        this.$eventBus.$off('flyToFZC')
    },
    created() {
        var img = new Image()
        img.src = require('@/assets/map/townFrame.png')
        this.imgFZCTown = img

        this.entitiesFZC_XZC_Point = new Map()
        this.entitiesFZC_XZC_TXT = new Map()
        this.$eventBus.$on('FZCHideXZC', this.hideXZC)
        this.$eventBus.$on('FZCShowXZC', this.showXZC)
        this.$eventBus.$on('flyToFZC', this.flyToFZC)
    },
    methods: {
        flyToFZC(item) {
            console.log(item)
            var entityP = this.entitiesFZC_XZC_Point.get(item.addvcd)
            if (entityP) {
                this.$viewer.flyTo(entityP, {
                    duration: 0.5,
                    offset: {
                        heading: this.$viewer.camera.heading,
                        pitch: this.$viewer.camera.pitch,
                        range: 5000
                    }
                })
            } else {
                if (item.lgtd && item.lttd) {
                    this.$viewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(item.lgtd, item.lttd, 5000.0),
                        orientation: {
                            heading: this.$viewer.camera.heading,
                            pitch: this.$viewer.camera.pitch,
                            roll: 0.0
                        }
                    })
                }
            }
        },
        hideXZC(ADCD) {
            var entityP = this.entitiesFZC_XZC_Point.get(ADCD)
            if (entityP) {
                entityP.show = false
            }
            var entityT = this.entitiesFZC_XZC_TXT.get(ADCD)
            if (entityT) {
                entityT.show = false
            }
        },
        showXZC() {
            if (this.layerList2[1].children.FZC.show) {
                this.entitiesFZC_XZC_Point.forEach((val, key) => {
                    val.show = true
                })
                this.entitiesFZC_XZC_TXT.forEach((val, key) => {
                    val.show = true
                })
            }
        },
        getFZCTownImg(img, txt) {
            return new Promise((resolve, reject) => {
                var size = 16
                var canvas = document.createElement('canvas')
                canvas.width = img.width * 1.2
                canvas.height = img.height * 1.2
                var ctx = canvas.getContext('2d')
                ctx.scale(2, 2) // 清晰一些

                ctx.drawImage(img, 0, 0, canvas.width / 2, canvas.height / 2)

                ctx.shadowOffsetX = 5 // 用来设定阴影在 X轴的延伸距
                ctx.shadowOffsetY = -5 // 用来设定阴影在 Y轴的延伸距
                ctx.shadowBlur = 0 // 设定阴影的模糊程度 默认0
                ctx.shadowColor = 'rgba(0, 0, 0, 0.85)' // 设定阴影颜色效果
                ctx.font = `bold ${size}px BlenderPro`
                ctx.textAlign = 'center'
                ctx.textBaseline = 'top'
                ctx.fillStyle = '#FFF'

                ctx.fillText(txt, canvas.width / 4, 9)

                const image = new Image()
                image.src = canvas.toDataURL('image/png')
                resolve(image)
            })
        },
        creatFZC() {
            this.clearFZC()
            var eventFn = (level) => {
                this.levelFZC = level
            }
            this.$store.getters.eventCesiumOption.levelFns.set('防治村', eventFn)
            if (this.layerList2[1].children.FZC.show) {
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/FZC.json`
                this.$axios.get(url).then(res => {
                    this.$viewer.scene.terrainProvider.readyPromise.then(() => {
                        res.data.features.forEach((item) => {
                            // console.log(item.properties)
                            var coordinates = item.geometry.coordinates
                            var name = item.properties['ADNM']
                            var code = item.properties['ADCD']
                            var levels = item.properties['LEVELS']
                            if (levels !== '4' && levels !== '5') return
                            if (levels === '4') {
                                var L4Dis = 150000

                                var entityZhen = {
                                    position: Cesium.Cartesian3.fromDegrees(
                                        coordinates[0],
                                        coordinates[1],
                                        200
                                    ),
                                    eventName: 'FZC',
                                    lid: 'FZC',
                                    prop: item.properties,
                                    label: {
                                        text: name,
                                        scale: 1,
                                        font: '22px sans-serif',
                                        fillColor: Cesium.Color.fromCssColorString('#06499B'),
                                        outlineColor: Cesium.Color.fromCssColorString('#FFF'),
                                        outlineWidth: 5,
                                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                        pixelOffset: new Cesium.Cartesian2(20, -3),
                                        eyeOffset: new Cesium.Cartesian3(0, 0, 0),
                                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 垂直
                                        verticalOrigin: Cesium.VerticalOrigin.CENTER,
                                        disableDepthTestDistance: 50000000
                                    },
                                    billboard: {
                                        scale: 1,
                                        image: this.iconFZCTown,
                                        width: 32,
                                        height: 32,
                                        // horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
                                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                        verticalOrigin: Cesium.VerticalOrigin.CENTER,
                                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L4Dis)
                                    }
                                }
                                this.entitiesFZC_XZC_Point.set(item.properties['ADCD'], this.$viewer.entities.add(entityZhen))
                                /*
                                var z1 = 0
                                var pos = new Cesium.CallbackProperty((time, result) => {
                                    z1 += 0.03
                                    var h2 = Math.sin(z1) * 50
                                    return Cesium.Cartesian3.fromDegrees(
                                        coordinates[0],
                                        coordinates[1],
                                        350 + h2
                                    )
                                })
                                this.getFZCTownImg(this.imgFZCTown, name).then(image => {
                                    var angle = 1
                                    var entityZhen = {
                                        position: pos,
                                        eventName: 'FZC',
                                        lid: 'FZC',
                                        prop: item.properties,
                                        billboard: {
                                            scale: new Cesium.CallbackProperty((time, result) => {
                                                if (this.levelFZC <= 1000) {
                                                    return 1.333// 24px
                                                } else {
                                                    return 1
                                                }
                                            }),
                                            image: image,
                                            width: image.width / 2,
                                            height: image.height / 2,
                                            // horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
                                            horizontalOrigin: new Cesium.CallbackProperty((time, result) => {
                                                if (this.levelFZC >= 500) {
                                                    return Cesium.HorizontalOrigin.RIGHT
                                                } else {
                                                    return Cesium.HorizontalOrigin.CENTER
                                                }
                                            }),
                                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                            verticalOrigin: Cesium.VerticalOrigin.CENTER,
                                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L4Dis)
                                        },
                                        model: {
                                            uri: '/gltf/slz.gltf',
                                            runAnimations: false,
                                            scale: 5,
                                            minimumPixelSize: 70,
                                            maximumScale: 70,
                                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                            nodeTransformations: {
                                                'Sphere001': new Cesium.NodeTransformationProperty({
                                                    // translation: new Cesium.CallbackProperty(function(time, result) {
                                                    //     z += 0.1
                                                    //     var h = Math.sin(z) * 0.5
                                                    //     return new Cesium.Cartesian3(0, h, 0)
                                                    // }, false),
                                                    rotation: new Cesium.CallbackProperty(function(time, result) {
                                                        angle += 0.02
                                                        return Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, angle, result)
                                                    }, false)
                                                })
                                                // 可以在这里添加多个节点
                                            }
                                        }
                                    }
                                    this.entitiesFZC_XZC_Point.set(item.properties['ADCD'], this.$viewer.entities.add(entityZhen))
                                })
                                */
                            }
                            if (levels === '5') {
                                var L5Dis = 70000
                                var pos5 = Cesium.Cartesian3.fromDegrees(
                                    coordinates[0],
                                    coordinates[1],
                                    50
                                )
                                getTxtImg(name, 12, 'BlenderPro').then(image => {
                                    var entityBill = {
                                        position: pos5,
                                        eventName: 'FZC',
                                        prop: item.properties,
                                        label: {
                                            text: name,
                                            scale: 1,
                                            font: '14px sans-serif',
                                            fillColor: Cesium.Color.fromCssColorString('#76e437'),
                                            outlineColor: Cesium.Color.fromCssColorString('#000'),
                                            outlineWidth: 4,
                                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                            pixelOffset: new Cesium.Cartesian2(-10, -10),
                                            eyeOffset: new Cesium.Cartesian3(0, 0, 0),
                                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 垂直
                                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                            disableDepthTestDistance: 50000000,
                                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000)
                                        },
                                        // billboard: {
                                        //     scale: new Cesium.CallbackProperty((time, result) => {
                                        //         if (this.levelFZC <= 1000) {
                                        //             return 1.66
                                        //         } else {
                                        //             return 1
                                        //         }
                                        //     }),
                                        //     image: image,
                                        //     width: image.width / 2,
                                        //     height: image.height / 2,
                                        //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                                        //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                        //     heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                        //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L5Dis)
                                        // }
                                    }
                                    // this.entitiesFZC.push(this.$viewer.entities.add(entityBill))
                                    this.entitiesFZC_XZC_TXT.set(item.properties['ADCD'], this.$viewer.entities.add(entityBill))
                                })
                                var entity5 = {
                                    eventName: 'FZC',
                                    lid: 'FZC',
                                    prop: item.properties,
                                    position: pos5,
                                    billboard: {
                                        // image: this.layerList2[1].children.FZC.icon,
                                        scale: 2,
                                        image: this.fzcImg,
                                        horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
                                        verticalOrigin: Cesium.VerticalOrigin.TOP,
                                        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L5Dis),
                                        width: this.$config.mapConfig.billboardSize / 2,
                                        height: this.$config.mapConfig.billboardSize / 2
                                    }
                                }
                                this.entitiesFZC_XZC_Point.set(item.properties['ADCD'], this.$viewer.entities.add(entity5))
                            }
                        })
                        // 自然树延迟加载体
                        setTimeout(() => {
                            res.data.features.forEach((item) => {
                                // console.log(item.properties)
                                var coordinates = item.geometry.coordinates
                                var name = item.properties['ADNM']
                                var levels = item.properties['LEVELS']

                                if (levels === '6') {
                                    var L6Dis = 3000
                                    var pos6 = Cesium.Cartesian3.fromDegrees(
                                        coordinates[0],
                                        coordinates[1],
                                        30
                                    )
                                    getTxtImg(name, 16, 'BlenderPro').then(image => {
                                        var entityBill = {
                                            position: pos6,
                                            eventName: 'FZC',
                                            prop: item.properties,
                                            billboard: {
                                                scale: 1,
                                                image: image,
                                                width: image.width / 2,
                                                height: image.height / 2,
                                                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                                                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L6Dis)
                                            }
                                        }
                                        this.entitiesFZC_XZC_TXT.set(item.properties['ADCD'], this.$viewer.entities.add(entityBill))
                                    })
                                    var entity6 = {
                                        eventName: 'FZC',
                                        lid: 'FZC',
                                        prop: item.properties,
                                        position: pos6,
                                        billboard: {
                                            image: this.layerList2[1].children.FZC.icon,
                                            horizontalOrigin: Cesium.HorizontalOrigin.RIGHT,
                                            verticalOrigin: Cesium.VerticalOrigin.TOP,
                                            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                                            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, L6Dis),
                                            width: this.$config.mapConfig.billboardSize / 2,
                                            height: this.$config.mapConfig.billboardSize / 2
                                        }
                                    }
                                    this.entitiesFZC_XZC_Point.set(item.properties['ADCD'], this.$viewer.entities.add(entity6))
                                }
                            })
                        }, 2000)
                        this.initEventFZCFly()
                    })
                })
            } else {
                this.clearFZC()
            }
        },
        initEventFZCFly() {
            var eventFn = pickedObject => {
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName
                ) {
                    if (pickedObject.id.eventName === 'FZC' && pickedObject.id.prop['LEVELS'] && pickedObject.id.prop['LEVELS'] === '5') {
                        console.log(pickedObject.id.prop)
                        this.$eventBus.$emit('FZCINFO', pickedObject.id.prop)
                        this.$viewer.flyTo(pickedObject.id, {
                            duration: 0.5,
                            offset: {
                                heading: this.$viewer.camera.heading,
                                pitch: this.$viewer.camera.pitch,
                                range: 5000
                            }
                        })
                    }
                }
            }
            this.$store.getters.eventCesiumOption.leftPickFns.set('FZCFLY', eventFn)
        },
        clearFZC() {
            if (this.entitiesFZC_XZC_Point.size > 0) {
                this.entitiesFZC_XZC_Point.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesFZC_XZC_Point = new Map()
            }
            if (this.entitiesFZC_XZC_TXT.size > 0) {
                this.entitiesFZC_XZC_TXT.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entitiesFZC_XZC_TXT = new Map()
            }
        }
    }
}
